<!-- saved from url=(0022)http://internet.e-mail -->
<html>
  <head>
    <title></title>
    <style>
		.page {
			width: *;
			height: *;
			border: 1dip solid red;
		}

      .grid div { size: 50dip; background:gold; font-size:20pt; vertical-align:middle; text-align:center;}
      .grid {
        // grid flow:      
        flow: grid( 1  2  3  4  5  13,
                    1  2  8  9  9  14,
                    6  2  10 11 15 17,
                    6  12  7  16 18 17 );
        border-spacing:4dip;
        size:max-content;
		    margin: *;
		    border: 1dip solid blue;
      }
      
    </style>
    
    <script>
      const grid_flow = `grid(1 2 3 4 5 13,
                              6 6 8 9 9 14,
                              6 6 10 11 15 17,
                              12 12 7 16 18 17)`;
    
      const rows_flow = "row('div', 'div', 'div', 'div')"; // four columns grid      
      var g = document.$(".grid");
                              
      document.on("change", "form", function(evt, form) {
        var flow = form.value.flow;     
        g.style.setProperty("size", "max-content"); 
        if( flow == "grid" ) {
          g.style.setProperty("flow", grid_flow);
          g.style.removeProperty("width");
        }
        else if( flow == "rows" ) {
          g.style.setProperty("flow", rows_flow);
          g.style.removeProperty("width");
        }
        else if( flow == "hf" ) {
          g.style.setProperty("flow", "horizontal-flow");
          g.style.setProperty("width", "100%");
        }
      });
      
      console.log( printf("flow=%V\n", g.style.getPropertyValue("flow")) );      
      
    </script>
    
    
  </head>
<body>
  <form>
    Layout 
    <button|radio(flow) value="grid">grid</button>
    <button|radio(flow) value="rows">rows</button>
    <button|radio(flow) value="hf">horizontal-flow</button>
  </form>

	<div class="page">
	<div class="grid">
		<div>1</div>
		<div>2</div>
		<div>3</div>
		<div>4</div>
		<div>5</div>
		<div>6</div>
		<div>7</div>
		<div>8</div>
		<div>9</div>
		<div>10</div>
		<div>11</div>
		<div>12</div>
		<div>13</div>
		<div>14</div>
		<div>15</div>
		<div>16</div>
		<div>17</div>
		<div>18</div>
	</div>
	</div>
</body>
</html>
